import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useSimpleFocus, FocusableItem } from '../hooks/useSimpleFocus';
import { FocusableButton } from './FocusableButton';

interface SimpleButtonBarProps {
  buttons: Array<{
    id: string;
    title: string;
    onPress: () => void;
    disabled?: boolean;
  }>;
}

export const SimpleButtonBar: React.FC<SimpleButtonBarProps> = ({ buttons }) => {
  const focusableItems: FocusableItem[] = buttons.map(btn => ({
    id: btn.id,
    onPress: btn.onPress,
  }));

  const { focusedIndex, isFocused } = useSimpleFocus(focusableItems);

  return (
    <View style={styles.container}>
      {buttons.map((button, index) => (
        <FocusableButton
          key={button.id}
          title={button.title}
          isFocused={isFocused(index)}
          disabled={button.disabled}
          onPress={button.onPress}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    gap: 10,
    padding: 20,
  },
}); 